<template>
    <div>
      <div style="margin-top: 10px;display: flex;justify-content: center">
          <el-input v-model="keyWords" placeholder="通过用户名搜索" prefix-icon="el-icon-search" style="width: 400px;" @keydown.enter.native="doSearch"></el-input>
          <el-button icon="el-icon-search" type="primary" style="margin-left: 5px" @click="doSearch" >搜索</el-button>
      </div>
        <div class="hr-container">
            <el-card class="hr-card" v-for="(hr,index) in hrs" :key="index">
                <div slot="header" class="clearfix">
                    <span>{{hr.name}}</span>
                    <el-button style="float: right; padding: 3px 0;color:red" type="text" icon="el-icon-delete" @click="deleteByHrId(hr.id,hr.name)"></el-button>
                </div>
               <div>
                   <div class="img-container">
                       <el-avatar :src="hr.userface" :size="80"></el-avatar>
                   </div>
                   <div class="userinfo-container">
                       <div>用户名：{{hr.name}}</div>
                       <div>手机号码：{{hr.phone}}</div>
                       <div>电话号码：{{hr.telephone}}</div>
                       <div>地址：{{hr.address}}</div>
                       <div>
                           用户状态：
                           <el-switch @change="enabledChange(hr)"
                                   v-model="hr.enabled"
                                   active-color="#13ce66"
                                   inactive-color="#ff4949"
                                   active-text="启用"
                                   inactive-text="禁用">
                           </el-switch>
                       </div>
                       <div>
                           用户角色：<el-tag type="success" v-for="(role,index) in hr.roles" :key="index" style="margin-right: 5px">{{role.nameZh}}</el-tag>

                           <el-popover
                                   @show="showPop(hr)"
                                   @hide="hidePop(hr)"
                                   placement="right"
                                   title="角色列表"
                                   width="200"
                                   trigger="click">
                               <el-select v-model="selectedRole" placeholder="请选择" multiple>
                                   <el-option
                                           v-for="(rs,indexrs) in allRoles"
                                           :key="indexrs"
                                           :label="rs.nameZh"
                                           :value="rs.id">
                                   </el-option>
                               </el-select>
                               <el-button slot="reference" icon="el-icon-more" type="text"></el-button>
                           </el-popover>
                       </div>
                       <div>
                           备注：{{hr.remark}}
                       </div>
                   </div>
               </div>
            </el-card>

        </div>
    </div>
</template>

<script>
    export default {
        name: "SysHr",
        data(){
            return {
                keyWords :'',
                hrs:[],
                allRoles:[],
                selectedRole:[]
            }
        },
        mounted(){
            this.initHrs();
        },
        methods:{
            //初始化数据
            initHrs(){
                this.getRequest('/api/system/hr/?keyWords=' + this.keyWords).then(resp=>{
                    if(resp){
                        this.hrs = resp;
                    }

                })
            },
            //搜索
            doSearch(){
                this.initHrs();
            },
            //switch状态改变时
            enabledChange(hr){
                console.log(hr);
                delete hr.roles;
                this.putRequest('/api/system/hr/',hr).then(resp=>{
                    if(resp){
                        this.initHrs();
                    }
                })
            },
            //加载所有角色
            initAllRole(){
                this.getRequest('/api/system/hr/roles').then(resp=>{
                    if(resp){
                        this.allRoles = resp;
                    }

                })
            },
            //打开Popover 弹出框
            showPop(hr){
                let roles = hr.roles;
                this.selectedRole = [];
                roles.forEach(r=>{
                    this.selectedRole.push(r.id)
                })
                this.initAllRole();
            },
            //关闭Popover 弹出框
            hidePop(hr){
                let roles = [];
                Object.assign(roles,hr.roles);
                let falg = false;
                if(roles.length != this.selectedRole.length){
                    falg = true;
                }else{
                    for (let i=0;i<roles.length;i++){
                        let role = roles[i];
                        for (let j = 0;j<this.selectedRole.length;j++){
                            let sr = this.selectedRole[j];
                            if(role.id == sr){
                                roles.splice(i,1);
                                i--;
                                break;
                            }
                        }
                    }
                }
                if(roles.length != 0){
                    falg = true;
                }
                if(falg) {
                    let roleIds = this.selectedRole.map(item => item).join();
                    this.putRequest('/api/system/hr/updateHrRole/' + hr.id + '/' + roleIds).then(resp => {
                        if (resp) {
                            this.initHrs();
                        }
                    })
                }
            },
            deleteByHrId(id,name){
                this.$confirm('此操作将永久删除该【' + name +'】这位Hr, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    this.deleteRequest('/api/system/hr/' + id).then(resp=>{
                        if(resp){
                            this.initHrs();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }
        }
    }
</script>

<style scoped>
    .hr-container{
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
.hr-card{
    width: 30%;
    margin-bottom: 20px;
}
    .img-container{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .userinfo-container div {
        font-size: 12px;
        color: #409eff;
    }
    .userinfo-container {
        margin-top: 20px;
    }
</style>